<template>
	<a-spin :spinning="loading" style="margin-top: 90px">
		<a-table
			class="global-table"
			:row-key="rowKey"
			:pagination="false"
			:columns="cColumns"
			:data-source="dataSource"
			:row-selection="cRowSelection"
			:scroll="{ x: xScroll, y: yScroll }"
			@change="ChangeSort"
		>
			<!-- 暂无数据的效果 -->
			<template #emptyText>
				<div style="padding: 200px 24px">
					<global-svg-icon icon-name="empty" width="200px" height="72px" style="color: #4e596a"></global-svg-icon>
				</div>
			</template>

			<template #bodyCell="{ column, record }">
				<!-- 自定义显示的操作列 -->
				<template v-if="cColumnItem(column).dataIndex === 'operation'">
					<slot name="operation" :record="record"></slot>
				</template>

				<template v-if="cColumnItem(column).dataIndex !== 'operation'">
					<!-- 自定义渲染列内容 -->
					<slot v-if="cColumnItem(column).custom" :name="cColumnItem(column).dataIndex" :record="record"></slot>

					<template v-else>
						<!-- 显示省略提示框 -->
						<a-tooltip v-if="column.ellipsis" placement="topLeft">
							<template #title>{{ record[cColumnItem(column).dataIndex] }}</template>
							<p class="font-14 tooltip-default-text">{{ record[cColumnItem(column).dataIndex] }}</p>
						</a-tooltip>

						<p v-else class="font-14">{{ record[cColumnItem(column).dataIndex] }}</p>
					</template>
				</template>
			</template>
		</a-table>
	</a-spin>
</template>

<script setup lang="ts" name="GlobalTable">
import { computed } from 'vue';
import { g6DeepClone } from 'glasssix-utils-ts';

type TsPros = {
	rowKey?: string;
	loading?: boolean;
	dataSource: Record<string, any>[];
	columns: TsGlobalType.TsTableColumn[];
	selectedRowKeys?: (string | number)[];
	// 是否需要选择框
	useSelect?: boolean;
	// 是否显示操作列
	showOperation?: boolean;
	// 操作列宽度
	operationWidth?: number;
	// 表格高度
	yScrollVal?: number;
	xScroll?: number;
};

const props = withDefaults(defineProps<TsPros>(), {
	rowKey: 'id',
	loading: false,
	dataSource: () => [],
	columns: () => [],
	selectedRowKeys: () => [],
	useSelect: true,
	operationWidth: 200,
	yScrollVal: 560,
	xScroll: 1400
});

const emits = defineEmits<{
	(e: 'selected', rowKeys: (string | number)[], node: (string | number)[]): void;
	(e: 'sort', { order, orderKey }: { order: string; orderKey: string }): void;
}>();

const cColumnItem = computed(() => {
	return function (params: any) {
		return params as TsGlobalType.TsTableColumn;
	};
});

// 计算table的列
const cColumns = computed(() => {
	if (!props.columns.length) {
		return [];
	}

	let arr = g6DeepClone(props.columns).filter((col: TsGlobalType.TsTableColumn) => col.dataIndex !== 'operation');
	// showOperation=true的话，补充操作列
	props.showOperation && arr.push({ dataIndex: 'operation', title: '操作', width: props.operationWidth });
	arr.at(-1).fixed = 'right';
	return arr;
});

const yScroll = computed(() => {
	return props.yScrollVal;
});

// 是否显示勾选框
const cRowSelection = computed(() => {
	if (props.useSelect) {
		return {
			selectedRowKeys: props.selectedRowKeys,
			onChange: (rowKeys: (string | number)[], node: (string | number)[]): void => emits('selected', rowKeys, node)
		};
	}
	return undefined;
});

// 排序
const ChangeSort = (pagination: any, filters: any, sorter: any): void => {
	const order = sorter.order === 'ascend' ? 'asc' : 'desc';
	const orderKey = sorter.field;
	emits('sort', { order, orderKey });
};
</script>

<style lang="less">
.global-table {
	.ant-checkbox-inner {
		border-radius: 4px;
	}

	.tooltip-default-text {
		overflow: hidden;
		width: 100%;
		white-space: nowrap;
		text-overflow: ellipsis;
	}

	.operations {
		display: flex;

		.operation-item-btn {
			margin-right: 16px;
			color: @link01;

			&:hover {
				color: #679ff6;
				opacity: 0.85;
				cursor: pointer;
			}

			&:active {
				color: #2f6bcb;
				cursor: pointer;
			}
		}

		.operation-item-btn:last-child {
			margin-right: 0;
		}
	}
}
</style>
